<template>
    <div class="section-header text-center section-header--dark section-header--max20">
        <h2 class="style2-h2">Most Popular Programs
            instead of classes.</h2>
    </div>
    <div class="course__wrapper">
        <SwiperSlide :dataList="courses.slice(0, 3)" :breakpoints="breakpoints" :loop="true" :pagination="pagination">
            <template #content="{ item }">
                <CourseCardFour :courseDetails="item" />
            </template>
            <template v-slot:pagination>
                <div class="slider__pagination-2 mt-5 py-2 text-center"></div>
            </template>
        </SwiperSlide>
    </div>
</template>

<script>
import SwiperSlide from "@/components/base/slots/SwiperSlide.vue";
import CourseCardFour from '@/components/partials/CourseCardFour.vue'
export default {
    components: { CourseCardFour, SwiperSlide },
    props: {
        courses: {
            type: Array,
            default: () => [],
        },
    },

    data() {
        return {
            spaceBetween: 24,
            grabCursor: true,
            loop: true,
            slidesPerView: 1,
            breakpoints: {
                576: {
                    slidesPerView: 1,
                },
                768: {
                    slidesPerView: 2,
                },
                992: {
                    slidesPerView: 3,
                    spaceBetween: 15,
                }
            },

            autoplay: {
                delay: 1,
                disableOnInteraction: true,
            },
            speed: 3000,
            pagination: {
                el: ".slider__pagination-2",
                clickable: true
            },

        }
    },

}
</script>